<template>
<div class="question-container">
    <!-- 标题区域 -->
    <div class="page-header">
        <el-text class="title" size="large" tag="b">
            <el-icon class="icon">
                <List />
            </el-icon>
            题目列表
        </el-text>
        <el-text type="info" size="small">共 {{ total }} 道题目</el-text>
    </div>

    <!-- 加载骨架屏 -->
    <el-skeleton :loading="loading" animated :count="5" :throttle="500">
        <template #template>
            <div v-for="i in 5" :key="i" class="skeleton-item">
                <el-skeleton-item variant="h3" style="width: 40%" />
                <el-skeleton-item variant="text" style="width: 30%; margin-left: 20px" />
                <el-skeleton-item variant="text" style="width: 20%; margin-left: auto" />
            </div>
        </template>

        <!-- 正式内容 -->
        <template #default>
            <!-- 错误提示 -->
            <el-alert v-if="error" :title="error" type="error" show-icon closable class="mb-4" />

            <!-- 题目列表 -->
            <div class="question-list">
                <div v-for="item in records" :key="item.id" class="question-item" @click="router.push({name: 'question-detail',params: {id: item.id}})">
                    <div class="question-main">
                        <el-text class="question-title" tag="b">{{ item.title }}</el-text>
                        <div class="meta-info">
                            <el-tag :type="getDifficultyType(item.difficulty)" effect="light">
                                {{ item.difficulty }}
                            </el-tag>
                            <el-text type="info" size="small">
                                <el-icon>
                                    <User />
                                </el-icon>
                                {{ item.user?.userName }}
                            </el-text>
                            <el-text type="info" size="small">
                                <el-icon>
                                    <Clock />
                                </el-icon>
                                {{ formatDate(item.createTime) }}
                            </el-text>
                        </div>
                    </div>
                    <div class="tag-list">
                        <el-tag v-for="(tag, index) in item.tagList" :key="index" type="primary" effect="light"
                            class="tag-item">
                            {{ tag }}
                        </el-tag>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination" v-if="records.length > 0">
                <el-pagination background layout="prev, pager, next" :total="Number(total)"
                    :page-size="Number(pageSize)" :current-page="Number(current)"
                    @current-change="handlePageChange" />
            </div>
        </template>
    </el-skeleton>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { List, Clock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 响应式数据
const records = ref([])
const loading = ref(true)
const error = ref(null)
const total = ref(0)
const pageSize = ref(10)
const current = ref(1)

// 获取题目数据
const fetchQuestions = async () => {
try {
    loading.value = true
    const response = await axios.post('http://localhost:8121/api/question/list/page/vo', {
        current: current.value,
        pageSize: pageSize.value
    })

    records.value = response.data.data.records
    total.value = response.data.data.total
    pageSize.value = response.data.data.size
    current.value = response.data.data.current
} catch (err) {
    error.value = err.message || '题目加载失败'
} finally {
    loading.value = false
}
}

// 难度类型映射
const getDifficultyType = (difficulty) => {
const typeMap = {
    '简单': 'success',
    '中等': 'warning',
    '困难': 'danger'
}
return typeMap[difficulty] || 'info'
}

// 日期格式化
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString()
}

// 分页变化
const handlePageChange = (newPage) => {
current.value = newPage
fetchQuestions()
}

onMounted(fetchQuestions)
</script>

<style scoped>
.question-container {
background-color: #fff;
border-radius: 8px;
padding: 24px;
width: 100vh;
margin: 20px auto;
}

.page-header {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 24px;

.title {
    color: var(--el-color-primary);
    font-size: 20px;

    .icon {
        margin-right: 8px;
        vertical-align: -2px;
    }
}
}

.question-list {
border: 1px solid var(--el-border-color);
border-radius: 8px;
}

.question-item {
padding: 16px 24px;
border-bottom: 1px solid var(--el-border-color);
transition: background 0.2s;
display: flex;
justify-content: space-between;
align-items: center;

&:last-child {
    border-bottom: none;
}

&:hover {
    background: var(--el-color-primary-light-9);
}
}

.question-main {
flex: 1;
margin-right: 24px;
}

.question-title {
font-size: 16px;
margin-bottom: 8px;
display: block;
}

.meta-info {
display: flex;
align-items: center;
gap: 12px;

.el-tag {
    margin-right: 8px;
}

.el-icon {
    margin-right: 4px;
}
}

.tag-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
max-width: 300px;
}

.tag-item {
margin-left: 8px;
}

.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}

.skeleton-item {
padding: 16px;
border-bottom: 1px solid var(--el-border-color);
display: flex;
align-items: center;
}
</style>